<template>
  <div id="main-content">
    <div class="content">
      <el-page-header @back="goBackToList" title="返回列表" content="基本信息"></el-page-header>
      <div class="toolBar">
        <el-link
          class="info_link"
          type="primary"
          @click="hrefTo('hourseBaseInfo')"
          icon="el-icon-s-home"
          disabled
        >
          <h3>基本信息</h3>
        </el-link>
        <span v-show="hourseId">
          <el-link
            class="info_link"
            type="primary"
            @click="hrefTo('hourseEstateInfo')"
            icon="el-icon-house"
          >小区信息</el-link>
          <el-link
            class="info_link"
            type="primary"
            @click="hrefTo('hourseImage')"
            icon="el-icon-picture"
          >图片管理</el-link>
          <el-link
            class="info_link"
            type="primary"
            @click="hrefTo('hourseOpeningInfo')"
            icon="el-icon-star-on"
          >开盘信息</el-link>
          <el-link
            class="info_link"
            type="primary"
            @click="hrefTo('hoursePresaleInfo')"
            icon="el-icon-platform-eleme"
          >预售许可证信息</el-link>
          <el-link
            class="info_link"
            type="primary"
            @click="hrefTo('hourseSaleInfo')"
            icon="el-icon-s-shop"
          >销售信息</el-link>
          <el-link class="info_link" type="primary" href icon="el-icon-s-promotion">相关房产</el-link>
        </span>
        <el-button type="primary" @click="saveBaseHourseInfo()" :loading="submitLoading">保存</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="楼盘名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="楼盘主图" v-show="hourseId">
          <img
            :src="form.mainImageUrl"
            width="60"
            height="80"
            @click="openMainImageUrl(form.mainImageUrl)"
            v-show="this.hourseId"
          />
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadImgAction"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :limit="1"
            :file-list="fileList"
            list-type="text"
            :on-success="(res,file)=>uploadImgSuccess(res,index)"
          >
            <el-button size="small" type="primary" slot="trigger">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="楼盘地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="所在城市名称">
          <el-select v-model="form.cityName" placeholder="请选择">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在城市区域">
          <el-input v-model="form.areaAllName" placeholder="eg 宝安区"></el-input>
        </el-form-item>
        <!-- <el-form-item label="建筑类型">
          <el-select v-model="form.architecturalType" placeholder="请选择">
            <el-option
              v-for="item in architecturalTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="开发商">
          <el-input v-model="form.developCompany"></el-input>
        </el-form-item>
        <el-form-item label="物业类型">
          <el-checkbox-group v-model="propertyTypeCheckedList">
            <el-checkbox
              v-for="propertyType in propertyTypeOptions"
              :label="propertyType"
              :key="propertyType"
            >{{propertyType}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="装修情况">
          <el-input v-model="form.renovation"></el-input>
        </el-form-item>
        <el-form-item label="房间个数描述">
          <el-input v-model="form.roomRange" placeholder="eg 3-4个"></el-input>
        </el-form-item>
        <el-form-item label="面积范围描述">
          <el-input v-model="form.houseTypeRange" placeholder="eg 89-120平方米"></el-input>
        </el-form-item>
        <el-form-item label="均价">
          <el-input v-model="form.avgPrice" placeholder="eg 60000元/平米"></el-input>
        </el-form-item>
        <el-form-item label="经纬度">
          <el-col :span="11">
            <el-input v-model="form.latitude" placeholder="经度"></el-input>
          </el-col>
          <el-col class="line" :span="2"></el-col>
          <el-col :span="11">
            <el-input v-model="form.longitude" placeholder="纬度"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="是否热门楼盘">
          <el-radio-group v-model="form.isHot">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否新楼盘">
          <el-radio-group v-model="form.isNew">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="楼盘标签">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >{{tag}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
        </el-form-item>
        <div class="hourse-info-label">楼盘介绍</div>
        <froala id="edit" :tag="'textarea'" :config="froalaConfig" v-model="form.hourseIntroduce"></froala>
      </el-form>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </div>
  </div>
</template>
<script>
//import VueFroala from 'vue-froala-wysiwyg';
import {
  froalaConfig,
  cities,
  propertyTypeOptions
} from "@/constants/constants.js";

export default {
  data() {
    return {
      hourseId: "",
      submitLoading: false,
      froalaConfig: froalaConfig,
      form: {
        isHot: "0",
        isNew: "0",
        propertyType: ""
      },
      architecturalTypes: [
        { label: "1", value: "1" },
        { label: "2", value: "2" }
      ],
      propertyTypeCheckedList: [],
      propertyTypeOptions: propertyTypeOptions,
      cities: cities,
      content: "",
      editorSettings: {
        modules: {
          imageDrop: true,
          imageResize: {}
        }
      },
      fileList: [],
      uploadImgAction: "",
      dialogVisible: false,
      dialogImageUrl: "",
      dynamicTags: [],
      inputVisible: false,
      inputValue: ''
    };
  },
  methods: {
    saveBaseHourseInfo() {
      this.submitLoading = true;
      this.form.hourseId = this.hourseId;
      this.form.propertyTypeName = this.propertyTypeCheckedList.toString();
      if(this.dynamicTags && this.dynamicTags.length>0){
        this.form.hourseTags = this.dynamicTags.join(",");
      }
      this.$http
        .post("/api/hourseBaseInfo/save", this.form)
        .then(response => {
          this.hourseId = response.data.hourseId;
          this.uploadImgAction = "/api/uploadImage/main/" + this.hourseId;
          this.$notify({
            title: "提示",
            message: "保存成功",
            type: "success"
          });
          this.submitLoading = false;
        })
        .catch(error => {
          var responseData = error.response.data;
          this.$notify({
            showClose: true,
            message: responseData.errorMsg,
            type: "error"
          });
          this.submitLoading = false;
        });
    },
    getBaseHourseInfo(hourseId) {
      this.$http.get("/api/hourseBaseInfo/get/" + hourseId).then(response => {
        if (response) {
          this.form = response.data;
          if (this.form.propertyTypeName) {
            this.propertyTypeCheckedList = this.form.propertyTypeName.split(",");
            if(this.form.hourseTags){
              this.dynamicTags = this.form.hourseTags.split(",");
            }
          }
          this.loading = false;
        }
      });
    },
    hrefTo(moduleName) {
      this.$router.push("/" + moduleName + "/" + this.hourseId);
    },
    goBackToList() {
      this.$router.push("/hourseList");
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove() {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    openMainImageUrl(fileUrl) {
      this.dialogImageUrl = fileUrl;
      this.dialogVisible = true;
    },
    uploadImgSuccess(response, file, fileList) {
      this.$notify({
        title: "提示",
        message: "上传成功",
        type: "success"
      });
      this.fileList = [];
      this.form.mainImageUrl = response;
    },
     handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
  },
  created() {
    this.hourseId = this.$route.params.hourseId;
    if (this.hourseId) {
      this.uploadImgAction = "/api/uploadImage/main/" + this.hourseId;
      this.getBaseHourseInfo(this.hourseId);
    }
  }
};
</script>
<style>
.hourse-info-label {
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
  color: #606266;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.el-form-item__label {
  font-size: 14px !important;
  font-weight: bold;
}
.toolBar {
  width: 100%;
  height: 50px;
  padding: 5px;
  border-bottom: 2px solid #ebebeb;
  margin-bottom: 10px;
  text-align: right;
}
.info_link {
  margin-right: 50px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>